<!-- subpkg_archive/list/index.vue -->

<template>
	<scroll-page>
		<view class="archive-page">
			<view class="archive-tips">最多可添加6人</view>

			<uni-swipe-action>
				<uni-swipe-action-item :right-options="swipeOptions" v-for="(item, index) in patientList" :key="item.id" @click="onSwiperActionClick(item.id, index)">
					<view class="archive-card" :class="{ active: item.defaultFlag === 1 }">
						<view class="archive-info">
							<text class="name">{{ item.name }}</text>
							<text class="id-card">{{ maskIDCard(item.idCard) }}</text>
							<text class="default">默认</text>
						</view>
						<view class="archive-info">
							<text class="gender">{{ item.genderValue }}</text>
							<text class="age">{{ ageFun(item.age) }}</text>
						</view>
						<uni-icons class="edit-link" @click="navigatorToFromPages(item.id)" type="compose" size="30" color="#16c2a3"></uni-icons>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>

			<!-- 添加按钮 -->
			<view v-if="patientList.length <= 6" class="archive-card">
				<navigator class="add-link" hover-class="none" url="/subpack/from/from">
					<uni-icons color="#16C2A3" size="24" type="plusempty" />
					<text class="label">添加患者</text>
				</navigator>
			</view>
		</view>
	</scroll-page>
</template>
<script setup>
import { ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { onShow } from '@dcloudio/uni-app';
import { maskIDCard } from '@/utils/idCardUtils.js';
import usePatientStore from '@/store/patient.js';

const patientStore = usePatientStore();

const { patientList } = storeToRefs(patientStore);

const swipeOptions = ref([
	{
		text: '删除',
		style: {
			backgroundColor: '#dd524d'
		}
	}
]);

// 需要使用onshow钩子函数

onShow(() => {
	patientStore.patinetListApiAction();
});

const ageFun = (age) => {
	return age + '岁';
};

// 删除
const onSwiperActionClick = async (id, index) => {
	await patientStore.deletePatinetIdApiAction(id);
	patientList.value.splice(index, 1);
};
const navigatorToFromPages = (id) => {
	uni.navigateTo({
		url: `/subpack/from/from?id=${id}`
	});
};
</script>
<style lang="scss">
.archive-page {
	padding: 30rpx;
}

.archive-tips {
	line-height: 1;
	padding-left: 10rpx;
	margin: 30rpx 0;
	font-size: 26rpx;
	color: #6f6f6f;
}

.archive-card {
	display: flex;
	flex-direction: column;
	justify-content: center;

	position: relative;

	height: 180rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
	border: 1rpx solid transparent;
	background-color: #f6f6f6;

	&.active {
		background-color: rgba(44, 181, 165, 0.1);
		// border: 1rpx solid #16c2a3;

		.default {
			display: block;
		}
	}

	.archive-info {
		display: flex;
		align-items: center;
		color: #6f6f6f;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.name {
		margin-right: 30rpx;
		color: #121826;
		font-size: 32rpx;
		font-weight: 500;
	}

	.id-card {
		color: #121826;
	}

	.gender {
		margin-right: 30rpx;
	}

	.default {
		display: none;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		padding: 0 12rpx;
		margin-left: 30rpx;
		border-radius: 4rpx;
		color: #fff;
		font-size: 24rpx;
		background-color: #16c2a3;
	}
}

.edit-link {
	position: absolute;
	top: 50%;
	right: 30rpx;

	transform: translateY(-50%);
}

.add-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.label {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #16c2a3;
	}
}

:deep(.uni-swipe_button-group) {
	bottom: 30rpx;
}
</style>